<template>
  <div class="toast">
    <div class="editor-box">
      <span class="editor-box-span">可分配流量: {{ownFlow}}</span>
      <div class="editor-box-input">
        <input v-model="flow"  type="text">
        <span>G</span>
      </div>
      <div @click="closeToast" class="input-button blue">确定</div>
    </div>
  </div>
</template>

<script>
import {HAVEDEVNUM} from '../../api/request'
import {Toast} from 'vue-ydui/dist/lib.rem/dialog'
export default {
  data () {
    return {
      flow: '',
      ownFlow: ''
    }
  },
  mounted () {
    HAVEDEVNUM(this.$store.getters.uid).then(
      res => {
        let respData = res.data
        if (respData.code === 200) {
          this.ownFlow = respData.useFlow
        } else {
          Toast(respData.msg)
        }
      },
      error => {
        console.log(error)
      })
  },
  methods: {
    closeToast: function () {
      this.$emit('closeToast', this.flow)
    }
  }
}
</script>

<style scoped>
  .toast{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 5;
  }
  .editor-box{
    margin: 4rem auto;
    width: 5rem;
    height: 3.4rem;
    left: calc(50% - 2.5rem);
    text-align: center;
    background-color: #fff;
    font-size: 0;
    padding-top: 0.5rem;
    border-radius: 0.1rem;
  }
  .editor-box-span{
    font-size: 0.36rem;
    color: #686767;
  }
  .editor-box-input{
    margin: 0.28rem auto;
    width: 2.2rem;
    height: 0.6rem;
    text-align: left;
  }
  .editor-box-input input {
    width: 1.66rem;
    height: 0.56rem;
    color: #333;
    text-align: center;
    border-radius: 0.1rem;
    padding-left: 0.1rem;
    margin-left: 0.2rem;
    border: 1px solid #909192;
    box-shadow: 0 0 0.2rem rgba(0,0,0,0.2) inset;
  }
  .editor-box-input span{
    font-size: 0.3rem;
    color: #333;
    float: right;
    margin-top: 0.1rem;
  }
  .blue {
    margin: 0 auto;
    background-color: #0092f8;
    border-radius: 0.1rem;
    text-align: center;
    color: #ffffff;
    box-shadow: none;
    width: 3.6rem;
    letter-spacing: 0.03rem;
  }
</style>
